<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.*" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.Vector" %>
<%@ page import="javax.jdo.PersistenceManager" %>
<%@ page import="com.google.appengine.api.users.User" %>
<%@ page import="com.google.appengine.api.users.UserService" %>
<%@ page import="com.google.appengine.api.users.UserServiceFactory" %>
<%@ page import="appnode.Node" %>
<%@ page import="appnode.SearchNode" %>
<%@ page import="appnode.RateUtils" %>
<%@ page import="appnode.Link" %>
<%@ page import="appnode.PMF" %>
<%@ page import="com.google.appengine.api.datastore.Key"%>
<%@ page import="com.google.appengine.api.datastore.KeyFactory;"%>
<%@ page session="true"%>

<html>
  <head>
	
	<link rel="stylesheet" href="map.css" type="text/css" media="screen" title="mapcss"></link>
    <title>AppMapNode</title>
	
	<%
		// user
	    UserService userService = UserServiceFactory.getUserService();
	    //User user = userService.getCurrentUser();
		// get Node
		Vector mapvector = (Vector) session.getValue("map");
		if (mapvector==null) {
			out.print("NO");
		}
		String nodename = (String) mapvector.get(0);
		Node init_node = SearchNode.getByName(nodename);
		String init_key = init_node.getKeyStr();
	%>
	
	<script type="text/javascript">
	 var testname="";
	 var init_lat = "<%=init_node.getLat()%>";
	 var init_lng = "<%=init_node.getLng()%>"; 
	 var init_nodename = "<%=init_node.getNodename()%>";
	 var init_key = "<%=init_key%>";
     var init_p;	
	</script>
	
	<script type="text/javascript" src="maps.js"></script>
	
	<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;
	key=ABQIAAAA93mmG_9GVHrZQc0uDY9JhxR53orP37CVGrhoHFm0nIrb80EZexTyT3lbUmmiWSijKVtWh7Cq2qkFJQ"
	 type="text/javascript"></script>

<script>
	var point;
	var map;
	var gmarkers = new Array();
	var linkinfo = new Array();
</script>

<script>

// initial function
function load() {
	 if (GBrowserIsCompatible()) {
		
		// create the map
	    map = new GMap2(document.getElementById("map"));
	 	map.setUIToDefault();
     	init_p = new GLatLng( init_lat, init_lng);
		map.setCenter(init_p, 12);
		map.setMapType(G_PHYSICAL_MAP);
		
		tooltip = document.createElement("div");
        //document.getElementById("map").appendChild(tooltip);
		map.getPane(G_MAP_FLOAT_PANE).appendChild(tooltip);
        tooltip.style.visibility="hidden";
		
		// get my node
		var html = "<b>Name:</b>" + init_nodename + "<br>" + "<b>Owner :</b>" + "<%=init_node.getOwner()%>";
		var marker = createMarker(init_p,init_nodename,"initp",html);
		map.addOverlay(marker);
		
		marker.openInfoWindowHtml("Your node!");

		// get node links	
		<%	List<Node> link = SearchNode.getLinks(init_node);
			for (int i=0;i<link.size();i++) {
		%>
		
		point = new GLatLng(<%=link.get(i).getLat()%>,<%=link.get(i).getLng()%>);
     	var html = "<b>Name: </b>" + "<%=link.get(i).getNodename()%>" + "<br>" + "<b>Owner: </b>" + "<%=link.get(i).getOwner()%>" + "<br>" + "<b>Distance: </b> " + distance(init_p,point).toPrecision(3) + "Km";
		var marker = createMarker(point,"<%=link.get(i).getNodename()%>","mylinks",html);			
		map.addOverlay(marker);
		<%
		}	
		%>
		makeSidebar0();
	}	
}// onload


// create Marker 
function createMarker(point,name,category,html1) {
		
		var icon = new GIcon(G_DEFAULT_ICON);
		icon.shadow="icons/msmarker.shadow.png";
		icon.iconSize = new GSize(32, 32);
		icon.shadowSize = new GSize(62, 32);
		icon.iconAnchor = new GPoint(15, 30);
		icon.infoWindowAnchor = new GPoint(15, 1);
		
		var blueicon = new GIcon(icon,"icons/blue-dot.png");
		var redicon = new GIcon(icon,"icons/red-dot.png");
		
		if (category=="initp") {
		var marker = new GMarker(point,blueicon);
		}
		else {
		var marker = new GMarker(point,redicon);
		}
		
		marker.mycategory = category;
		marker.myname = name;
		marker.tooltip = '<div class="tooltip">'+name+'<\/div>';
		//html1 = '<div style="width:'+3*98+'px">' + html1 + '<\/div>';
		
		GEvent.addListener(marker,"mouseover", function() {
		          showTooltip(marker);
		        });        
		GEvent.addListener(marker,"mouseout", function() {
				tooltip.style.visibility="hidden"
		        });
		
        GEvent.addListener(marker, "click",function() {
		marker.openInfoWindowTabs([new GInfoWindowTab("Node","<div id='info1'><div id='ajaxloader'><img src=icons/ajax-loader.gif\></div></div>"), 
		new GInfoWindowTab("Interfaces","<div id='info2'>loading...</div>"), 
		new GInfoWindowTab("Ratings","<div id='info3'>loading...</div>")]);
		loadtabinfo(name,html1);
		});
		
         //save the info we need to use later for the side_bar

        gmarkers.push(marker);
	
        return marker;
} // createmarker

</script>
</head>

<!--body -->
 <body onload="load()" onunload="GUnload()">
	<%
		String url = "/";
	
	%>
	<div id="info" style="display:none"></div>
	<div id="maptable">
	<table class="maptabletd" cellspacing="0" cellpadding="0">
		<tr>
		     <td class="maptabletd" colspan="2" id="header"><div id="banner">AppMapNode</div>
			
				<div id="menu">		
							<a href="tableofmsg?nodename=<%=init_node.getNodename()%>">My Messages</a> |
							<a href="<%= userService.createLogoutURL(url)%>">Sign out</a>
				</div>
			</td>
		  </tr>
      <tr>
        <td class="maptabletd">
           <div id="map"></div>
        </td>
		<td class="maptabletd" valign="top" id="leftside">
			<div id="side_bar0"></div>
			<div id="search"><h1>Select Nodes</h1></div>
			<div id="barchoice">
				<form name="formnode" action="">
				Node : <select name="nodes">
					 			<option value="freenodes">freenodes</option>
								<option value="allnodes">allnodes</option>
							</select><br>
				Distance : <select name="distance"><option value="select">select</option>
								   <option value="a1"><1Km</option>
								   <option value="a2"><2Km</option>
								   <option value="a3"><3Km</option>
								   <option value="a4"><4Km</option>
								   <option value="a5"><5Km</option>
    							   <option value="a6"><6Km</option>
 								   <option value="a8"><8Km</option>
 								   <option value="a10"><10Km</option>
							</select><br>
			 		Ratings : <select name="ratings">
								<option value="select">select</option>
							  	<option value="commun">communication</option>
								<option value="collabor">collaboration</option>
								<option value="expert">expertise</option>
							  </select><br>
				<div id="checkbox"></div>
				<input type="button" value="Search" onClick="loadnodes()"/>
				</form>
				<div id="side_bar1"></div>
			</div>
		</td>		
	  </tr>
	  <tr>
      </tr>
    </table>
	</div>
	<div id="image"><img src="http://code.google.com/appengine/images/appengine-noborder-120x30.gif" 
	alt="Powered by Google App Engine" /></div>	
</body>
</html>


